<template>
  <Search :formInline="formInline" @search-change="handleSearch"></Search>
  <Table :tableData="tableData" :pagination="pagination" @changeCurrent="changeCurrent"></Table>
</template>
<script setup lang="ts">
  import { ref, nextTick, reactive } from 'vue'
  import moment from 'moment'
  import Search from './components/Search.vue'
  import Table from './components/Table.vue'
  import { ISearch } from './type/index'
  import { fetchTableList } from '@/api/home'
  const formInline = ref({
    companyName: '',
    searchTime: []
  })
  const tableData = ref([])
  const pagination = ref({
    currentPage: 1,
    pageSize: 10,
    total: 0
  })
  const handleSearch = (param: ISearch) => {
    const { companyName, searchTime } = param
    const params = {
      companyName,
      startDate: searchTime && searchTime.length > 0 ? moment(searchTime[0]).format('YYYY-MM-DD') : '',
      endDate: searchTime && searchTime.length > 0 ? moment(searchTime[1]).format('YYYY-MM-DD') : '',
      pageNumber: pagination.value.currentPage,
      pageSize: pagination.value.pageSize
    }
    getTableList(params)
  }

  const changeCurrent = (value: number) => {
    pagination.value.currentPage = value
    nextTick(() => {
      handleSearch(formInline.value)
    })
  }

  const getTableList = (params: any) => {
    fetchTableList(params).then((data: any) => {
      const { page_number, page_size, total, records } = data
      tableData.value = records
      pagination.value = {
        currentPage: page_number,
        pageSize: page_size,
        total: total
      }
    })
  }
  handleSearch(formInline.value)
</script>
